<template>
	<div>
		

		<!-- 标签选项卡兴趣  线路 游记 -->
		<uni-section>
			<view>
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
			<view>
				<!-- 兴趣 -->
				<view v-if="current === 0">
					<!-- 选项卡1内容 -->
					<!-- 一行两列 -->
					<uni-row class="demo-uni-row">
						<!-- 第一列 -->
						<uni-col :span="12">
							<view class="demo-uni-col dark">
								<uni-section v-for="items in indexData" v-show="items.id%2==1">
									<!-- 		<uni-view nvue="false" class="uni-section-header">
										<uni-view class="uni-section__content">
											<uni-text class="uni-section__content-title distraction">
												<span></span>
											</uni-text>
										</uni-view>
									</uni-view> -->

									<uni-card style="margin-top: -20px;margin: 5px;">
										<image slot='cover' mode="aspectFill" style="width: 100%;margin-top: 2%;border-radius: 15px;" :src="items.pictureUrl"
											@click="onIndexDetail(items.id,items.description)">
										</image>
										<text class="uni-body"
											@click="onIndexDetail(items.id,items.description)">{{items.name}}-{{items.city}}</text>
										<view slot="actions" class="card_bottom">
											<view class="card-actions-item" @click="actionsClick('分享')">
												<uni-icons type="redo" size="18" color="#999"></uni-icons>
												<text class="card-actions-item-text">分享</text>
											</view>

											<!-- <view class="card-actions-item" @click="onIndexDetail">
												<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
												<text class="card-actions-item-text">评论</text>
											</view> -->
											
											<view class="card-actions-item" @click="actionsClick('点赞',items.id)">
												<uni-icons v-if="hearts[items.id] == false" type="heart" size="18" color="#999"></uni-icons>
												<uni-icons v-else type="heart-filled" size="18" color="#f00"></uni-icons>
												<text class="card-actions-item-text">点赞</text>
											</view>
										</view>
									</uni-card>

								</uni-section>
							</view>
						</uni-col>
						<!-- 第二列 -->
						<uni-col :span="12">
							<view class="demo-uni-col light">
								<uni-section  v-for="items in indexData" v-show="items.id%2==0">
									<uni-card style="margin: 3px;margin-top: -20px;">
										<image slot='cover' mode="aspectFill" style="width: 100%;margin-top: 2%;border-radius: 15px;" :src="items.pictureUrl"
											@click="onIndexDetail(items.id,items.description)">
										</image>
										<text class="uni-body"
											@click="onIndexDetail(items.id,items.description)">{{items.name}}-{{items.city}}</text>
										<view slot="actions" class="card_bottom">
											<view class="card-actions-item" @click="actionsClick('分享')">
												<uni-icons type="redo" size="18" color="#999"></uni-icons>
												<text class="card-actions-item-text">分享</text>
											</view>

										<!-- 	<view class="card-actions-item" @click="onIndexDetail">
												<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
												<text class="card-actions-item-text">评论</text>
											</view> -->
											
											<view class="card-actions-item" @click="actionsClick('点赞')">
												<uni-icons v-if="heart" type="heart" size="18" color="#999"></uni-icons>
												<uni-icons v-else type="heart-filled" size="18" color="#f00"></uni-icons>
												<text class="card-actions-item-text">点赞</text>
											</view>
										</view>
									</uni-card>

								</uni-section>
							</view>
						</uni-col>
					</uni-row>
				</view>
				<!-- 路线 -->
				<view v-if="current === 1">
					<!-- 一行一列 -->
					<uni-section v-for="items in pathData">
						<uni-card>
							<image slot='cover' style="width: 100%;margin-top: 2%;" :src="cover" @click="onIndexDetail">
							</image>
							<text class="uni-body" @click="onIndexDetail">{{items.describe}}</text>
							<view slot="actions" class="card_bottom">
								<view class="card-actions-item" @click="actionsClick('分享')">
									<uni-icons type="redo" size="18" color="#999"></uni-icons>
									<text class="card-actions-item-text">分享</text>
								</view>
								<view>ds{{items.content[0]}}</view>
								<view class="card-actions-item" @click="onIndexDetail">
									<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
									<text class="card-actions-item-text">评论</text>
								</view>
							</view>
						</uni-card>

					</uni-section>
				</view>
				<!-- 选项卡3 -->
				<view v-if="current === 2">
					<uni-row class="demo-uni-row">
						<!-- 第一列 -->
						<uni-col :span="12">
							<view class="demo-uni-col dark">
								<uni-section v-for="items in tourData">
									<!-- 		<uni-view nvue="false" class="uni-section-header">
										<uni-view class="uni-section__content">
											<uni-text class="uni-section__content-title distraction">
												<span></span>
											</uni-text>
										</uni-view>
									</uni-view> -->
					
									<uni-card style="margin-top: 0px;" >
										<image slot='cover' style="width: 100%;margin-top: 2%;" :src="items.image.url"
											@click="onIndexDetail">
										</image>
										<text class="uni-body"
											@click="onIndexDetail">{{items.title}}</text>
										<view slot="actions" class="card_bottom">
											<view class="card-actions-item" @click="actionsClick('分享')">
												<uni-icons type="redo" size="18" color="#999"></uni-icons>
												<text class="card-actions-item-text">分享</text>
											</view>
					
											<view class="card-actions-item" @click="onIndexDetail">
												<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
												<text class="card-actions-item-text">评论</text>
											</view>
										</view>
									</uni-card>
					
								</uni-section>
							</view>
						</uni-col>
						<!-- 第二列 -->
						<uni-col :span="12">
							<view class="demo-uni-col light">
								<uni-section v-for="n in 5">
									<uni-card style="margin: 3px;margin-top: 0px;">
										<image slot='cover' style="width: 100%;margin-top: 2%;" :src="tourData[0].image.url"
											@click="onIndexDetail">
										</image>
										<text class="uni-body"
											@click="onIndexDetail">这是一个带封面和操作栏的卡片示例，此示例展示了封面插槽和操作栏插槽的用法。</text>
										<view slot="actions" class="card_bottom">
											<view class="card-actions-item" @click="actionsClick('分享')">
												<uni-icons type="redo" size="18" color="#999"></uni-icons>
												<text class="card-actions-item-text">分享</text>
											</view>
					
											<view class="card-actions-item" @click="onIndexDetail">
												<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
												<text class="card-actions-item-text">评论</text>
											</view>
										</view>
									</uni-card>
					
								</uni-section>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
		</uni-section>



	</div>

</template>

<script>
	export default {
		data() {
			return {
				indexData: '',
				pathData:'',
				tourData:'',
				data2:'',
				items: ['兴趣', '线路', '游记'],
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				current: 0,
				activeColor: '#007aff',
				styleType: 'text',

				// showRight: false,
				showLeft: false,
				
				heart: true,
				
				hearts:[],

				cover: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
			}
		},
		onLoad() {
			uni.request({
				//兴趣
				url: 'http://microtourism.natapp1.cc/serviceinterestpoint/interest-interest/findAll',
				method: 'GET',
				success: (res) => {
				    this.indexData = res.data.data,
					// console.log(res)
					// console.log(res)
					console.log('indexData: ',this.indexData)
					
					this.hearts.length = this.indexData.length
					for (var i = 0;i<this.indexData.length;i++) {
						this.hearts[i] = false
					}
					this.hearts[3]=true
					 // this.hearts.forEach((a,i)=>{
						 console.log('hearts: ',this.hearts)
					 // })
				},
				fail: (err) => {
					console.log(err)
				},
			})
			//游记列表
			 uni.request({
				//url: 'http://microtourism.natapp1.cc/verificationService/numberCode/4',
				url: '/api-clock/clock/list/0',
				method: 'GET',
				success: (res) => {
				    this.tourData = res.data.data
					console.log('123456789')
					// console.log(res)
					console.log('tourData: ',this.tourData)
				},
				fail: (err) => {
					console.log(err)
				}
			})
			//线路
			uni.request({
				url:'http://adastra.isamumu.cn:10200/api/v1/plan/',
				success: (res) => {
					this.pathData = res.data.Data.data.data
					console.log('pathData: ',this.pathData)
				},
				fail: (err) => {
					console.log(err)
				}
			})
			
			
		},
		methods: {
			toSearch() {
				console.log('asdf')
				uni.navigateTo({
					url: '../search/search'
				})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},


			onIndexDetail(id,desc) {
				console.log(id,desc)
				if(this.current==0){
					console.log(id,desc)
					uni.navigateTo({
						url: `../interestDetail/interestDetail?u=${id}&desc=${desc}`
					})
					console.log('index',desc)
				}
				if(this.current==1){
					uni.navigateTo({
						url:'../indexDetail/indexDetail'
					})
				}
				if(this.current==2){
					uni.navigateTo({
						url:'../indexDetail/indexDetail'
					})
				}
				
			},
			actionsClick(text,id) {
				console.log('test',id)
		
				if (text == '点赞') {
					// this.hearts[id-1]= !this.hearts[id-1]
				    this.$set(this.hearts,id-1,!this.hearts[id-1])
				    console.log(this.hearts)
					// this.heart = !this.heart
				}
				// uni.showToast({
				// 	title: text,
				// 	icon: 'none'
				// }),
				// uni.share({
				// 	provider: 'weixin',
				// 	scene: "WXSceneSession",
				// 	type: 5,
				// 	imageUrl: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/962fc340-4f2c-11eb-bdc1-8bd33eb6adaa.png',
				// 	title: '欢迎体验uniapp',
				// 	miniProgram: {
				// 		id: 'gh_abcdefg',
				// 		path: 'pages/index/index',
				// 		type: 0,
				// 		webUrl: 'http://uniapp.dcloud.io'
				// 	},
				// 	success: ret => {
				// 		console.log(JSON.stringify(ret));
				// 	}
				// });

				if(text == '分享'){
					uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 1,
					summary: "hello my name is jack",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
				}
				
			},
			// 微记详情
			// getData() {
			// 	console.log('getData() 开始执行')
			// 	// post请求测试系统生成的游玩计划
			// 	uni.request({
			// 		url:'/api-clock/clock/clock/1',

			// 		// method: 'POST',
			// 		 // header: {
			// 		 // 	'Content-Type': 'application/json'
			// 		 // },
					 
			// 		// url: 'http://47.108.166.186:8988/verificationService/numberCode/4',
			// 		// url: 'http://57af8608.cpolar.top/pathService/plan',
			// 		// data: 
			// 			// [{
			// 			// 		"name": "昆明世博园",
			// 			// 		"add": "102.756004,25.074062",
			// 			// 		"time": 250

			// 			// 	},
			// 			// 	{
			// 			// 		"name": "云南野生动物园",
			// 			// 		"add": "102.786863,25.096415",
			// 			// 		"time": 300

			// 			// 	},
			// 			// 	{
			// 			// 		"name": "石林风景名胜区",
			// 			// 		"add": "103.325701,24.812964",
			// 			// 		"time": 200

			// 			// 	},
			// 			// 	{
			// 			// 		"name": "丽江古城",
			// 			// 		"add": "100.235517,26.870507",
			// 			// 		"time": 360

			// 			// 	},
			// 			// 	{
			// 			// 		"name": "上海迪士尼乐园",
			// 			// 		"add": "121.667003,31.141447",
			// 			// 		"time": 405

			// 			// 	}
			// 			// ]
			// 		// ,
			// 		success: (res) => {
			// 			this.indexDetailData = res.data.data
			// 			console.log('123')
			// 			console.log(this.indexDetailData)
			// 		},
			// 		fail: (err) => {
			// 			console.log(err)
			// 		}
			// 	})
			// }
		},


	}
</script>

<style scoped>
	.top {
		display: flex;
		height: 35px;
	}

	input {
		border: 1px solid #9000FF;
		border-radius: 15px;
		/* text-align: center; */
	}

	.card_bottom {
		display: flex;
		justify-content: space-around
	}

	.uni-section-header {
		padding: 0px 10px !important;
	}
	
	
</style>
